  <template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <el-input v-model="query.phone" clearable placeholder="输入搜索用户手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />

      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <el-button
        type="danger"
        class="filter-item"
        size="mini"
        icon="el-icon-refresh"
        @click="toQuery"
      >刷新</el-button>

      <!--表单组件-->
      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="title" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
         <el-form-item label="审核结果">
           <el-select v-model="form.status" clearable placeholder="请选中审核结果" class="filter-item" style="width: 370px">
             <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" />
           </el-select>
         </el-form-item>
          <el-form-item label="理由">
            <textarea v-model="form.remark" style="width: 370px;height: 200px;"></textarea>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
        </div>
      </el-dialog>

      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="55" label="序号">
              <template scope="scope">
                <span>{{((page+1) - 1) * size + scope.$index + 1}}</span>
                </template>
            </el-table-column>
        <el-table-column  prop="userId" label="用户" >
          <template slot-scope="scope">
                <div style="display: flex;flex-direction: row;align-items: center;">
                   <img :src="scope.row.yxUser.avatar" style="width: 50px;height: 50px; border-radius: 25px;" />
                   <div style="font-size: 13px;margin-left: 10px;">{{scope.row.yxUser.nickname}}-{{scope.row.yxUser.phone}}</div>
                </div>
            </template>
          </el-table-column>

        <el-table-column  prop="url" label="图片" >
          <template slot-scope="scope">
               <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                     <div v-for="(src, index) in scope.row.url.split(',')" :key="index">
                       <el-image
                         style="width: 100%; height: 150px;"
                         :src="src.trim()"
                         :preview-src-list="[src.trim()]"
                       ></el-image>
                     </div>
                   </div>
              </template>
          </el-table-column>
          <el-table-column  prop="address" label="地址" >

          </el-table-column>
           <el-table-column  prop="remark" label="审核理由" >

          </el-table-column>
        <el-table-column  prop="status" label="状态" >
          <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" style="cursor: pointer" :type="'info'">待审核</el-tag>
              <el-tag v-if="scope.row.status === 1" style="cursor: pointer;color: green;" :type="'info'">已通过</el-tag>
               <el-tag v-if="scope.row.status === -1" style="cursor: pointer;color: green;" :type="'info'">已拒绝</el-tag>
            </template>
          </el-table-column>

        <el-table-column  prop="updateTime" label="更新时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
       <el-table-column v-permission="['admin','hcsCardUserRecord:edit','hcsCardUserRecord:del']" label="操作" width="300px" align="center">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="primary"
             icon="el-icon-edit"
             v-if="scope.row.status==0"
             @click="edit(scope.row)"
           >
             审核
           </el-button>
           <el-popover
             :ref="scope.row.id"
             placement="top"
             width="180"
           >
             <p>确定删除本条数据吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
               <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
             </div>
             <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
           </el-popover>
         </template>
       </el-table-column>
      </el-table>
      <!--分页组件-->
     <el-pagination
       :total="total"
       :current-page="page + 1"
       style="margin-top: 8px;"
       layout="total, prev, pager, next, sizes"
       @size-change="sizeChange"
       @current-change="pageChange"
     />
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/crud'
  import checkPermission from '@/utils/permission'
  import { add, edit,del } from '@/api/hcsCardUserRecord'

export default {
 mixins: [initData],
  data() {
    return {
      isAdd:true,
       loading: false, dialog: false,
       delLoading: false,
       title:"新增",
       statusList:[
         {name:'已通过',value:1}, {name:'已拒绝',value:-1}
       ],
       form:{
         id: '',
         productName :"",
         title: "",
         code:"",
         mainUrl :"",
         mainUrlArr: [],
         urls:"",
         urlsArr :[],
         primaryNum: 0,
         differentNum:0,
         specialNum:0,
         points:0,
         specialNum:0,
         content:"",
      },
      permission: {
        add: ['admin', 'hcsCardUserRecord:add'],
        edit: ['admin', 'hcsCardUserRecord:edit'],
        del: ['admin', 'hcsCardUserRecord:del']
      },
      rules: {
      }

        }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/hcsCardUserRecord'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      return true
    },

    add(){
      this.dialog = true
      this.isAdd = true
      // this.resetForm()
    },
    submit(){
      this.loading = true
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    refresh(){
      this.dialog = false
      this.form = {
       id: '',
       businessName :"",
       status: 0,
       remark:""
      }
    },
    cancel(){
      this.refresh()
      this.init()
    },
    doAdd() {
      this.title = "新增"
      add(this.form).then(res => {
        this.refresh()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    splitUrls(urls) {
          if (!urls) return [];
          // 假设URL之间用逗号分割
          return urls.split(',').map(url => url.trim());
        },
    doEdit() {

      edit(this.form).then(res => {
        this.refresh()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    subDelete(id){
      this.delLoading = true
      let ids = [id]
      del(ids).then(res => {
         this.delLoading = false
         this.$refs[id].doClose()
        this.init()
      }).catch(err => {
        this.loading = false
      })
    },
    edit(data) {
      this.title = "编辑"
      this.isAdd = false
      this.form = {
        id: data.id
      }
      this.dialog = true
    }
  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
